<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				
			}
		</style>
	</head>
	<body>
		<div><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni, illum blanditiis. Molestiae minima velit cumque quas, labore dolores consectetur praesentium modi voluptas deserunt error eligendi accusantium id illum voluptates sed.</span></div>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus, facere laborum ducimus, quam voluptatem illo voluptates itaque adipisci nesciunt corrupti consequatur qui in, quis est. Est accusantium quas autem a?</p>
		
		<div style="width: 100px; height: 100px;background-color: #ff7d00;"></div>
		<span>文本</span>
		<br />
		<input type="button" value="按钮2">
		<input type="text" />
		
		<script>
			/*   javaScript:基础语法+*DOM（页面）+BOM（浏览器）
			     JQuery操作DOM方式【7方式，36个函数】--改变页面效果
				 1.元素内容操作：操作元素和元素内容的方式【3个函数】
				 .html()
				 .val()
				 .text()
				 2.元素属性操作：操作元素的属性【固定属性、附加属性】【4个函数】
				 .attr()
				 .removeAttr()
				 .prop()
				 .removeProp
				 3.元素类名操作：操作css样式【4个函数】
				 addClass()
				 removeClass()
				 toggleClass()
				 hasClass()
				 4.元素样式【尺寸】操作：【5个函数】
				 css()
				 width()和height()
				 outerHeight()和outerWidth()
				 5.元素删除和插入操作：【7个函数】
				 append()和prepend()
				 after()和before()
				 remove()和empty()
				 replaceWith()
				 6.元素遍历操作：【6个函数】
				 children()和parent()
				 siblings()
				 next()和prev()
				 each()
				 7.动画操作：【7个函数】
				 show()和hide()
				 slideDown()和slideUp()
				 fadeIn()和fadeOut()
				 hover()
				 大作业：tab选项卡
				 BOM 浏览器对象模型：学习7个对象的方法使用
				 吸顶灯效果
			*/
			
			
			
			/*$("input[type='button']").click(function(){
			 $("input[type='text']").val("文本框输出效果");
			});*/
			
			$("div").mouseenter(Function(){
				$("span").html("<a href='#'>超文本</a>");
			});
			
			/*JQuery操作DOM：通过点击一个元素绑定一个事件给另一个元素改变效果
			.html()函数 ：增加一个元素，覆盖原来的html
			.val()函数：与input元素使用，改变修改表单元素中文本
			 */
			/*$('button').click(function(){
				//DOM操作---改变页面其他元素
				//DOM操作---改变p元素改成marquee元素
				$('p').html("<marquee>跑马灯...</marquee>")
				});*/
				/*练习：100*100框，div 鼠标移动上去，文本改成超链接
				  按钮和输入框，点击按钮，输入框输出文字效果
				*/
			
		</script>
	</body>
</html>